<template>
  <div>
    <van-area
      title="切换城市"
      :area-list="areaList"
      @confirm="onConfirm"
      @cancel="onCancel"
      cancel-button-text="返回"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      areaList,
    };
  },
  methods: {
    //点击右侧确认
    onConfirm(item) {
      this.$store.dispatch("saveCity", item[1].name);
      this.$router.replace({ path: "/" }); //跳转首页
    },
    //点击左侧取消
    onCancel(){
      this.$router.replace({ path: "/" }); //跳转首页
    }
  },
};
</script>

<style lang="scss" scoped>
.van-area {
  height: 100%;
}
</style>